<template>
    <div>
        <el-descriptions direction="vertical" :title="user.name + '的分享'" border :column="4">
            <el-descriptions-item label="用户名" label-class-name="my-label" class-name="my-content" width="150px">
                {{ user.name }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{ user.mobile }}
            </el-descriptions-item>
            <el-descriptions-item label="推荐人数">
                {{ user.rewardtimes }}
            </el-descriptions-item>
            <el-descriptions-item label="头像">
                <el-image :src="user.avatar" style="width:80px;" mode="widthFix"></el-image>
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
                {{ user.created_at }}
            </el-descriptions-item>
        </el-descriptions>

        推荐用户
        <vxe-table border stripe height="400" :column-config="{ resizable: true }" :data="children">
            <vxe-column field="id" title="ID" sortable></vxe-column>
            <vxe-column field="name" title="名称" sortable></vxe-column>
            <vxe-column field="mobile" title="手机号" sortable></vxe-column>
            <vxe-column field="avatar" title="头像" show-overflow>
                <template #default="{ row }">
                    <el-image :src="row.avatar" mode="widthFix" style="width:32px"></el-image>
                </template>
            </vxe-column>

            <vxe-column field="created_at" title="注册时间" show-overflow></vxe-column>
            <vxe-column title="操作" show-overflow>
                <template #default="{ row }">
                    <el-button type="primary" v-if="row.is_reward == 0" @click="confirmReward(row)">奖励</el-button>
                    <el-button type="info" v-else disabled>已奖励</el-button>
                </template>
            </vxe-column>
        </vxe-table>
    </div>
</template>

<script setup lang="ts">
import { http } from '@/plugins/axios'
import router from '@/plugins/router'
const { gridOptions } = useMember();
const gridEvent: VxeGridListeners<RowVO> = {
    proxyQuery() {
        console.log('数据代理查询事件')
    },
    proxyDelete() {
        console.log('数据代理删除事件')
    },
    proxySave() {
        console.log('数据代理保存事件')
    }
}
const xGrid = ref({} as VxeGridInstance)
const id = router.currentRoute.value.params.id
const children = ref([])
const user = reactive({
    id: "",
    name: "",
    mobile: "",
    avatar: "",
    rewardtimes: 0,
    created_at: ""
})
const getUserShare = async () => {
    const { data } = await http.request({
        url: `user/${id}/share`,
    })
    children.value = data.children
    user.name = data.name
    user.mobile = data.mobile
    user.avatar = data.avatar
    user.rewardtimes = data.rewardtimes
    user.created_at = data.created_at
}
getUserShare()

const confirmReward = async (row: any) => {
    // 创建一个奖励订单
    await http.request({
        url: "order",
        method: "post",
        data: {
            subject: `推荐人：${row.pid}|被推荐人：${row.id}`,
            price: 5,
            state: 2,
            way: "reward"
        }
    })
    // 更新当前用户被奖励状态
    await http.request({
        url: `user/${row.id}/Updatereward`,
        method: "get",
    })
    xGrid.value.commitProxy('reload')
}
</script>

<style scoped>
:deep(.my-label) {
    background: var(--el-color-success-light-9) !important;
}

:deep(.my-content) {
    background: var(--el-color-danger-light-9);
}
</style>